<template>
  <div>
    <t-row :gutter="16">
      <t-col :span="4">
        <t-card title="线上收款演示">
          <t-layout style="background-color: #fff">
            <t-aside style="text-align: center">
              <qrcode :value="qrcodeValue" style="width: 110px; height: 110px"></qrcode>
              <p>手机扫码</p>
              <!-- <t-button variant="text" @click="fetchData">刷新</t-button> -->
            </t-aside>
            <t-content style="padding-left: 20px">
              <p>多个应用支付统一管理</p>
              <p>统一收款码</p>
              <p>支持多种付款方式</p>
              <p>提供二次开发技术服务</p>
            </t-content>
          </t-layout>
        </t-card>
      </t-col>
      <t-col :span="4">
        <t-card title="远程收款演示">
          <t-layout style="background-color: #fff">
            <t-aside style="text-align: center">
              <qrcode :value="payQrcode" style="width: 110px; height: 110px"></qrcode>
              <p>手机扫码</p>
            </t-aside>
            <t-content style="padding-left: 20px">
              <p>手机扫码</p>
              <p>输入支付金额</p>
              <p>发起支付</p>
              <p>支持支付宝和微信支付</p>
            </t-content>
          </t-layout>
        </t-card>
      </t-col>
      <t-col :span="4">
        <t-card title="支付响应内容">
          <t-textarea v-model="payResult" :autosize="{ minRows: 6, maxRows: 6 }" readonly></t-textarea>
        </t-card>
      </t-col>
    </t-row>
    <div>
      <t-card>
        <t-space>
          <t-button theme="default" variant="text" @click="intro">交易宝介绍</t-button>
          <t-button variant="text" @click="buyUrl">查看源码</t-button>
        </t-space>
      </t-card>
    </div>
  </div>
</template>

<script lang="ts">
export default {
  name: 'DashboardBase',
};
</script>

<script setup lang="ts">
import { ref, defineProps, onMounted } from 'vue';
import qrcode from 'qrcode.vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { TenpayPrepayOrder } from '@/api/test';
import $eventBus from '@/utils/eventBus';

// import { useRouter } from 'vue-router';

const payQrcode = ref('');
const buyUrl = () => {
  window.location.href = 'https://down.rs888.net/jyb-source/';
};
const intro = () => {
  window.location.href = 'https://rscode.cn/jyb/index.html';
};
const payResult = ref('提供后台消息与前端消息，方便业务处理');
const props = defineProps({
  cashierUrl: {
    type: String,
    default: 'https://pay.rscode.cn/cashier/index.html',
  },
});
const qrcodeValue = ref('');
const formData = ref({
  mchId: '',
  orderNo: '',
  appId: '',
  payAmount: 1,
  openId: '',
  attach: '',
});

// 拉取订单数据
const fetchData = () => {
  TenpayPrepayOrder(formData.value.payAmount).then((ret) => {
    formData.value.mchId = ret.mchId;
    formData.value.orderNo = ret.orderNo;
    formData.value.appId = ret.appId;
    qrcodeValue.value = `${props.cashierUrl}#/order/base?appid=${formData.value.appId}&payee=软商网络&orderNo=${formData.value.orderNo}&orderName=技术服务费&payAmount=${formData.value.payAmount}&openId=${formData.value.openId}`;
  });
};

payQrcode.value = `https://pay.rscode.cn/cashier/index.html#/order/base?orderType=2&payee=${encodeURIComponent(
  '软商网络',
)}`;
fetchData();
$eventBus.on('receiveMsgEvent', (d: any) => {
  payResult.value = d as string;
});

// sse消息
const sseClient = () => {
  const url = '/sse';
  const sse = new EventSource(url);

  sse.addEventListener('message', ({ data }) => {
    const d = JSON.parse(data);
    if (d.type === 'pay.success') {
      MessagePlugin.success(`订单${d.orderNo}支付成功`);
    }
  });

  sse.addEventListener('error', (err: any) => {
    console.log(err);
  });
};

onMounted(() => {
  sseClient();
});
</script>

<style scoped>
.row-container:not(:last-child) {
  margin-bottom: 16px;
}
:deep() .t-card__body {
  padding-top: 0;
}
</style>
